<template>
  <div class="border_line">
    <div class="card_child">
      <div class="img_warp">
        <img v-show="props.data.coverImg" :src="props.data.coverImg" alt="loading" class="w-[170px] h-[96px]">
      </div>
      <div class="header_wrap ml-[16px]">
        <div>
          <p class="title ellipsis flex items-center">
            <StatusTag :activityType="props.data?.liveBroadcast" class="mr-[8px]" />
            {{ props.data.title }}
          </p>
          <p class="desc ellipsis-two-line">
            {{ props.data.desc }}
          </p>
        </div>
        <div class="count_wrap" v-if="isShowArticleTime">
          <div class="time">
            <GIcon name="gt-line-date" class="mr-[8px]" color="var(--devui-placeholder)" />
            <span>{{ dayjs(new Date(props.data.releaseTime).getTime()).format('YYYY-MM-DD HH:mm:ss') }}</span>
          </div>
        </div>
        <div class="count_wrap" v-if="isShowActivityTime">
          <div class="time">
            <GIcon name="gt-line-date" class="mr-[8px]" color="var(--devui-placeholder)" />
            <span>活动时间：</span>
            <span>{{ dayjs(new Date(props.data.startTime).getTime()).format('YYYY-MM-DD HH:mm:ss') }}</span>
            <span>-</span>
            <span>{{ dayjs(new Date(props.data.endTime).getTime()).format('YYYY-MM-DD HH:mm:ss') }}</span>
          </div>
        </div>
        <div class="count_wrap" v-if="showLecturer">
          <div class="time">
            <GIcon name="gt-line-user" class="mr-[8px]" color="var(--devui-placeholder)" />
            <span>讲师：</span>
            <span>{{ props.data.lecturer }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="count_wrap_mb" v-if="isShowArticleTime">
      <div class="time">
        <GIcon name="gt-line-date" class="mr-[8px]" color="var(--devui-placeholder)" />
        <span>{{ dayjs(new Date(props.data.releaseTime).getTime()).format('YYYY-MM-DD HH:mm:ss') }}</span>
      </div>
    </div>
    <div class="count_wrap_mb" v-if="isShowActivityTime">
      <div class="time">
        <GIcon name="gt-line-date" class="mr-[8px]" color="var(--devui-placeholder)" />
        <span>活动时间：</span>
        <span>{{ dayjs(new Date(props.data.startTime).getTime()).format('YYYY-MM-DD HH:mm:ss') }}</span>
        <span>-</span>
        <span>{{ dayjs(new Date(props.data.endTime).getTime()).format('YYYY-MM-DD HH:mm:ss') }}</span>
      </div>
    </div>
  </div>

</template>

<script lang='ts' setup>
import dayjs from 'dayjs'
import type { IResult } from '../types/index'
import StatusTag from '@/pages/Activity/components/StatusTag.vue'

defineOptions({ name: 'Card' })

const props = withDefaults(defineProps<{
  data: IResult,
  tab: string
}>(), {
  data() {
    return {
      releaseTime: '',
      id: '',
      path: '',
      title: '',
      desc: '',
      coverImg: '',
      startTime: '',
      endTime: ''
    }
  },
  tab: 'article'
})

//显示 文章的发布时间
const isShowArticleTime =computed(()=>props.data.releaseTime && props.tab === 'article')

//显示 活动的起止时间
const isShowActivityTime =computed(()=>props.data.startTime && props.data.endTime && props.tab === 'activity')

const showLecturer = computed(()=>props.data.lecturer && props.tab === 'course')
</script>

<style scoped lang='scss'>
.border_line {
  border-left: 1px solid #E3E3EE;
  border-right: 1px solid #E3E3EE;
  border-bottom: 1px solid #E3E3EE;
}

.card_child {
  display: flex;
  justify-content: flex-start;

  padding: 16px;
  cursor: pointer;

  .header_wrap {
    flex: 1;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .title {
    font-size: 16px;
    color: #3B3E55;
    font-weight: 600;
  }

  .desc {
    color: #9C9DB4;
    margin: 4px 0;
  }


  .count_wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .star_count_wrap {
      font-size: 12px;
      color: #9C9DB4;
    }

    .time {
      span {
        color: #9C9DB4;
      }
    }
  }

  .img_warp {
    overflow: hidden;
    flex: 0 0 222px;
    display: inline-block;

    img {
      object-fit: cover;
      border-radius: 4px;
      width: 100%;
      height: 100%;
    }
  }
}

@media screen and (min-width: 768px) {
  .count_wrap_mb {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .count_wrap_mb {
    display: block;
    padding: 0 16px;
    font-size: 14px;
    color: #9C9DB4;
    padding-bottom: 8px;
  }

  .card_child {
    .header_wrap {
      padding: 0;
      overflow: hidden;

    }

    .count_wrap {
      display: none;
    }

    .img_warp {
      flex: 0 0 160px;
      height: 72px;

      img {
        object-fit: cover;
        width: 100%;
        border-radius: 4px;
        height: 100%;
      }
    }
  }

}
</style>
